<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link rel="stylesheet" href="../../../static/layui/css/layui.css"
	media="all" />
<link rel="stylesheet" href="../../../static/css/public.css" media="all" />
<link rel="stylesheet"
	href="../../../static/plugin/zTree/css/zTreeStyle/zTreeStyle.css"
	type="text/css">
</head>
<body class="childrenBody">
	<form class="layui-form">
		<blockquote class="layui-elem-quote quoteBox">
			<form class="layui-form">
			    <div class="layui-inline">
			        <label class="layui-form-label" id="chsCount1"></label>
					<label  class="layui-input-block"> 
						<a class="layui-btn hidden-btn" data-type="reload">对账</a>
					 </label>
				</div>
				<div class="layui-inline">
				    <label class="layui-form-label" id="chsCount2"></label>
					<div class="layui-input-block">
						<a class="layui-btn layui-btn-normal insert-btn">添加</a>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label"></label>
					<div class="layui-input-block">
						<select id="chgCp" lay-verify="required" lay-filter="chgCp">
							<option value="0">全部</option>
							<option value="1">收入</option>
							<option value="-1">支出</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label" id="allCount">  </label>
					<div class="layui-input-block">
						<a  id="pre-btn" class="layui-btn pre-btn layui-btn-danger" style="display: none;"
							data-type="reload">《</a>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label"></label>
					<div class="layui-input-block">
						<select  id="cptMth"  lay-filter="cptMth"></select>
					</div>
				</div>
				<div class="layui-inline">
					<label> </label>
					<div class="layui-input-block">
						<a id="next-btn" class="layui-btn next-btn layui-btn-danger" style="display: none;"
							data-type="reload">》</a>
					</div>
				</div>
			</form>
		</blockquote>

		<table id="list" lay-filter="list"></table>
 
	</form>
	<div id="treeDiv" class="menuContent"
		style="display: none; position: absolute; background: white; border: 1px black solid; z-index: 999">
		<ul id="departmentTree" class="ztree"
			style="margin-top: 0; width: 160px;"></ul>
	</div>
	<script type="text/javascript"
		src="../../../static/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="../../../static/layui/layui.js"></script>
	<script type="text/javascript"
		src="../../../static/custom/js/common.js"></script>
	<script type="text/javascript"
		src="../../../static/plugin/zTree/js/jquery.ztree.core.js"></script>
	<script type="text/javascript">
    	let tabDatas ;    //全部table中数据
	    let incDatas=[];  //table中收入数据
	    let outDatas=[];  //table中支出数据
	    let countDatas;   //
		let cntRow =0;    //对账选中多少行
		let sumRow =0;     //对账选中行合计
 
		layui.use( [ 'form', 'layer', 'table',   'laytpl' ],
						function() {
			                let listApi = '../../../accounting/cwCapitals/list';
							let toInsertHtml = 'insert.html';
							let cfmApi = '../../../accounting/cwCapitals/cfm';
							let deleteApi = '../../../accounting/cwCapitals/delete';
					
							let cols = [[
									{
										//type : "checkbox",
										fixed : "left",
										width : 50,
										title : '<input type="checkbox" lay-skin="primary"  id="check-all" class="check-all" lay-filter="check-all">',
										templet : function(d) {
											var str = '';
											if (!hasProtect(d)) {
												str += '<input type="checkbox" lay-skin="primary" class="check-one"  value="'+d.id+'" lay-filter="check-one" lay-event="chs">';
											} else {
												str += '<input type="checkbox" lay-skin="primary" class="check-one"  value="'+d.id+'" lay-filter="check-one" disabled lay-event="chs">';
											}
											return str;
										}
									},{
										field : 'cptdate',
										title : '存取时间',
										align : 'center'
									},{
										field : 'cptname',
										title : '资金名目',
										align : "center"
									},{
										field : 'cptacount',
										title : '金额',
										align : 'center'
									},{
										field : 'typec',
										title : '类型	',
										align : 'center'
									},{
										field : 'cpttype',
										title : '资金账户',
										align : 'center'
									},{
										field : 'crer',
										title : '填报人',
										align : 'center',
									},{
										field : 'descb',
										title : '备注描述',
										align : 'center',
									},{
										title : '操作',
										fixed : "right",
										align : "center",
										width : 300,
										templet : function(d) {
											var str = '';
											if(d.flag==1){
												str += '已入账';
											}else{
												str += '<a class="layui-btn layui-btn-xs" lay-event="cfm">确认入账</a>';
												str += '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>';
											}
											return str;
										}
									} ] ];
							var pram = merger(constant.page.toUri(),
									getsearchVal());
							var form = layui.form, layer = parent.layer === undefined ? layui.layer
									: top.layer;
							var $ = layui.jquery;
							var laytpl = layui.laytpl;
							var table = layui.table;
							var naviObj ;
							
							tableIns = table.render({
								elem : '#list',
								cellMinWidth : constant.table.cellMinWidth,
								page : false,
								limit: 1000,   
								height : "full-245",
								cols : cols,
								done : function(res, page, count) {
									checkAll(form);
								}
							});

							//资金流水列表
							listLoad(pram);
							function listLoad(data) {
								loadAjax(listApi, "get", data, function(response) {
									baseCallBack(response, function(response) {
										tabDatas = response.data.datas
										
										table.reload("list", {
											data : tabDatas
										})
										//  reset 导航条
										 $("#allCount").html("合计"+tabDatas.length+"条");
										 $("#chsCount1").html('')
										 $("#chsCount2").html('')
										 $("#pre-btn").hide();
										 $("#next-btn").hide();
										 //清空收入和支出的缓存数组
										 incDatas.length=0;
										 outDatas.length=0;
										 
										 console.log(response.data.navi)
										if(response.data.navi){
											naviObj = response.data.navi
											if(response.data.navi.pre){
												$("#pre-btn").show();
											}
                                            if(response.data.navi.next){
                                            	$("#next-btn").show();
											}
											$("#cptMth").empty();
											// 月份导航下拉框
											$.each(response.data.navi.selectAll,(i,e)=>{
												   if(response.data.navi.current == e){
													   $("<option selected>"+e+"</option>").appendTo($("#cptMth"));
												   }else{
			 					                       $("<option>"+e+"</option>").appendTo($("#cptMth"));
												   }
		 				                    })
										}
										form.render();
									});
								});
							}
							// 添加
							$(".insert-btn").click(function() {
							    openAreaLayer("添加记账流水", toInsertHtml,"480px", "460px", true);
							});
							// 搜索【此功能需要后台配合，所以暂时没有动态效果演示】
							$(".pre-btn").on("click", function() {
								 listLoad({ mth:naviObj.pre  });
							});
							$(".next-btn").on("click", function() {
								listLoad({ mth:naviObj.next });
							});
							// layUI处理change事件不生效
			                form.on('select(cptMth)', function(data){
								  listLoad({ mth:$("#cptMth").val()  })
							});	    	
			                form.on('select(chgCp)', function(data){
			                	if($("#chgCp").val()==0){
			                		table.reload("list", { data : tabDatas })
			                		 $("#allCount").html("合计"+tabDatas.length+"条");
			                	}else if($("#chgCp").val()==1){
			                		if(incDatas.length==0){
			                			// 数组的过滤方法  ，对比下面的循环写法
				                		incDatas = tabDatas.filter(e=>e.cptacount>0);
			                		}
			                		table.reload("list", { data : incDatas })
			                		 $("#allCount").html("合计"+incDatas.length+"条");
			                	}else if($("#chgCp").val()==-1){
			                		if(outDatas.length==0){
			                			$.each(tabDatas,function(i,v){
				                			if( v.cptacount<0 ){
				                				outDatas.push(v)
				                			}
				                		})
			                		}
			                		table.reload("list", { data : outDatas })
			                		 $("#allCount").html("合计"+outDatas.length+"条");
			                	}
							});	    	
							//对账计算
							$(".hidden-btn").click(
											function() {
												var ids = getCheckedId();
												if (ids && ids.length) {
													countDatas= tabDatas.filter((e)=>{
														//截断：全选选中时会把下面的全部加一遍
														if( $("#chgCp").val() == 0 && ids.length>tabDatas.length){
															ids = ids.slice( tabDatas.length,ids.length  ) 
														}else if( $("#chgCp").val() > 0 && ids.length>incDatas.length){
															ids = ids.slice( incDatas.length,ids.length  ) 
														}else if( $("#chgCp").val() < 0 && ids.length>outDatas.length){
															ids = ids.slice( outDatas.length,ids.length  ) 
														}
														
														for(var i in ids){
															if( ids[i] ==e.id){
																return true;
															}
														}
														return false;
													}) ;
													cntRow =0;
												    sumRow =0;
													$.each(countDatas,(i,v)=>{
														cntRow+=1;
														sumRow+= v.cptacount  
													}) 
													$("#chsCount1").html(sumRow.toFixed(2))
													$("#chsCount2").html('选中'+cntRow.toFixed(0)+'条')
												}  else{
													 $("#chsCount1").html('')
													 $("#chsCount2").html('')
												}
											});

							//列表操作
							table.on( 'tool(list)',
											function(obj) {
												var layEvent = obj.event;
												var data = obj.data;
												if (layEvent === 'cfm') {
													//确认入账操作
													confirmLayer(
															'提示信息',
															'确定入账？',
															function(confirm,index) { loadAjax( cfmApi + "/" + data.id, "get", null, function( response) { 
																		baseCallBack( response, function( response) {
																						layer.msg(response.msg);
																						listLoad(pram);
																						confirm.close(index);
																					});
																		}); })
													} else if (layEvent === 'del') {
													//删除
													confirmLayer(
															'提示信息',
															'确定删除？',
															function(confirm,
																	index) { loadAjax( deleteApi + "/" + data.id, "delete", null, function( response) { 
																		baseCallBack( response, function( response) {
																						layer.msg(response.msg);
																						listLoad(pram);
																						confirm.close(index);
																					});
															}); }) 	
													}  
											});
						})
	</script>
</body>
</html>